<template>
  <ul class="smallList">
    <li v-for="(item,index) in conList" :key="index">
        <router-link :to="'/detail/'+ item.vid"  class="link"><img :src="item.img"><span>{{item.time}}</span></router-link>
        <p>{{item.title}}</p>
    </li>
  </ul>
</template>

<script>
export default {
  props: [ 'conList' ]
}
</script>

<style lang='less'>
  .smallList {
    li {
     margin-bottom:8px;
     .link {
       display: block; position: relative; border-radius: 6px; overflow: hidden;
       img { display: block;}
       span { position: absolute; right: 10px; bottom:10px; color: #fff; background: rgba(0,0,0,0.6); padding: 3px 10px; border-radius: 10px;}
      }
      p { line-height: 1.4em; padding:3px 0;}
   }
  }
</style>
